<template>
	<view class="other-collection p-20">
		<u-navbar title="他的藏品" bgColor="#030204" safeAreaInsetTop :placeholder="true"
		leftIconColor="#ffffff" @rightClick="toPage" @leftClick="back"
		titleStyle="{fontSize: 16px;font-weight: bold;color: #FFFFFF;}">
			<view slot="right" class="nav-right">
				我的藏品
			</view>
		</u-navbar>
		<template v-if="!loading">
			<view class="list flex-no-horizontal" v-if="list.length">
				<collection v-for="(item, index) in list" class="list-item"
				:pro-data="item" :key="index"></collection>
			</view>
			<view class="empty" v-else>
				<u--image src="../../static/img/empty-my-collection2.png" width="210" height="169"></u--image>
				<text class="f-xs m-t-20">他还没有获得藏品哦～</text>
			</view>
		</template>
	</view>
</template>

<script>
	import {otherCollection} from '../../api/collection.js'
	import collection from './common/collection.vue'
	export default{
		components: { collection },
		data () {
			return {
				id: '',
				list: [],
				loading: true
			}
		},
		onLoad(option) {
			this.id = option.id || 1
			this.getCollection(this.id)
		},
		methods: {
			async getCollection (id) {
				this.loading = true
				uni.showLoading({
					title: '加载中...'
				})
				try{
					const res = await otherCollection({
						mid: typeof id === 'number' ? id : Number(id)
					})
					if (res.data && res.data.length) {
						const list = []
						res.data.forEach(item => {
							list.push({
								name: item.title,
								imgUrl: item.coverLink
							})
						})
						this.list = list
					}
					this.loading = false
					uni.hideLoading()
				}catch(e){
					console.log(e)
					this.loading = false
					uni.hideLoading()
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			toPage () {
				uni.navigateTo({
					url: './myCollection'
				})
			},
			back () {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.other-collection{
		box-sizing: border-box;
		background: #030204;
		min-height: 100%;
		.nav-right{
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}
		.list{
			flex-wrap: wrap;
			align-items: flex-start;
			.list-item{
				margin: 0 40rpx 40rpx 0;
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
		.empty{
			height: calc(100vh - 120px) ;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #747474;
		}
	}
</style>
